<template>
<view class="selectService">
	<view class="selectService-header">
		<image :src="`${prefix_image}/homepage/IntegralRecord/activityCheckInBg.png`" mode="aspectFill" />
	</view>
	<view class="selectService-content">
		<view class="selectService-title">瑞鹏宠物医院（康沈路分院）</view>
		<view class="selectService-address">浦锦路309弄3号</view>
		<view class="selectService-time">营业时间: 周一至周日 08:30-22:00</view>
	</view>
	<view class="selectService-service">
		<text class="selectService-service-left">服务项目</text>
		<view class="selectService-service-right" >
			<picker
				class="medical-tab0-animal-check"
				mode="selector" 
				:range="serviceArr" 
				:value="serviceArrNumber" 
				@change="bindPickerChange"
				range-key="name"		
			 >
			 <!-- {{serviceArrNumber > -1 ? `${serviceArr[serviceArrNumber]["name"]}` : "请选择"}} -->
				<view class="picker-inner">
					<text class="unSelect" v-if="serviceArrNumber === '请选择' " >
						请选择
					</text>
					<text class="selected" v-else>
						{{serviceArr[serviceArrNumber]["name"]}}
					</text>
					<image :src="`${prefix_image}/homepage/IntegralRecord/icon-right.png`" mode="aspectFill" />
				</view>
			 </picker>
		</view>
	</view>
	<view class="bottom-button-outer" @tap="gotoSelectDoctor()">
		<view class="bottom-button">
			确认
		</view>
	</view>
</view>
</template>

<script>
	import { defineComponent, reactive, toRefs } from "vue"
	import config from '@/hooks/useConfig.js'
	export default defineComponent({
		props: {
			isOnline: String
		},
		setup(props) {
			const { prefix_image }=config()
			const data = reactive({
				"serviceArr": [
					{
						"name": "服务一",
						"key": 0
					},
					{
						"name": "服务二",
						"key": 1
					},
				],
				"serviceArrNumber": "请选择",
			})
			const bindPickerChange = (e) =>{
				console.log(e)
				data.serviceArrNumber = e.target.value
			}
			const gotoSelectDoctor = () => {
				uni.navigateTo({
					// 选择医师
					url:`/pages/selectDoctor/index?isOnline=${props.isOnline}`,
				})
			}
		
			return {
				...toRefs(data),
				bindPickerChange,
				gotoSelectDoctor,
				prefix_image
			}
		}
		
	})
</script>

<style lang="stylus" scoped>
	.selectService{
		background: #F6F6F7;
		min-height: 100vh;
		.selectService-header{
			display: flex;
			image{
				width: 100%;
				height: 420rpx;

			}
		}
		.selectService-content{
			padding: 32rpx 32rpx 36rpx 32rpx;
			background-color: #fff;
			.selectService-title{
				font-size: 36rpx;
				// font-family: PingFangSC-Semibold, PingFang SC;
				font-weight: 600;
				color: #333333;
			}
			.selectService-address{
				font-size: 24rpx;
				// font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #999999;
				padding-top:16rpx;
			}
			.selectService-time{
				padding-top: 20rpx;
				font-size: 24rpx;
				// font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #333333;
			}
		}
		.selectService-service{
			height: 118rpx;
			display: flex;
			align-items: center;
			padding: 0rpx 32rpx;
			background-color: #FFFFFF;
			margin-top: 16rpx;
			.selectService-service-left{
				font-size: 32rpx;
				// font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #333333;
				flex: 1;
			}
			.selectService-service-right{
				font-size: 32rpx;
				// font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #B2B2B2;
				display: flex;
				align-items: center;
				.picker-inner{
					display: flex;
					align-items: center;
				}
				image{
					width: 48rpx;
					height: 48rpx;
				}
			}
		}
	
		.bottom-button-outer{
			display: flex;
			width: 100%;
			justify-content: center;
			.bottom-button{
				width: 600rpx;
				height: 96rpx;
				background: #FFD300;
				border-radius: 48rpx;
				font-size: 32rpx;
				font-weight: 600;
				color: #111111;
				text-align: center;
				line-height: 96rpx;
				position: fixed;
				bottom: 68rpx;
			}
		}
	}
</style>
